<template>
    <el-button type="primary" @click=" dialogVisible = true" :icon="Plus">关联服务</el-button>

    <el-dialog
        v-model="dialogVisible"
        title="选择服务"
        width="70%"
        style="height: 70vh"
        destroy-on-close
    >

        <el-table border :data="serviceData" style="width: 100% ;height: 500px" @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"/>
            <el-table-column fixed prop="service_id" label="ID" width="150"/>
            <el-table-column label="图片" width="120">
                <template #default="scope">
                    <el-image
                        :src="scope.row.service_cover_img"
                        fit="cover"
                        width="50%"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="service_name" label="服务名称"/>
            <el-table-column prop="service_price" label="服务价格"/>
            <el-table-column prop="service_duration" label="服务时长"/>
            <el-table-column prop="distribution_rebate" label="分销返佣(%)"/>
        </el-table>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">关闭</el-button>
                <el-button type="primary" @click="ok">确认</el-button>
            </div>
        </template>

    </el-dialog>


    <el-table border :data="tableData" style="width: 100% ;height: 700px"
    >
        <el-table-column fixed prop="service_id" label="ID" width="150"/>
        <el-table-column label="图片" width="120">
            <template #default="scope">
                <el-image
                    :src="scope.row.service_cover_img"
                    fit="cover"
                    width="50%"
                ></el-image>
            </template>
        </el-table-column>
        <el-table-column prop="service_name" label="服务名称"/>
        <el-table-column prop="service_price" label="服务价格"/>
        <el-table-column prop="service_duration" label="服务时长"/>
        <el-table-column prop="distribution_rebate" label="分销返佣(%)"/>
        <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
                <el-popconfirm title="确认要取消关联该服务吗?" @confirm="confirmEvent(scope.row.service_id)">
                    <template #reference>
                        <el-button type="danger">取消关联</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>


</template>
<script lang="ts" setup>
import {Plus} from "@element-plus/icons-vue";
import {ref, toRaw, watch} from "vue";
import {useI18n} from 'vue-i18n'

import {ElMessage, ElTable} from 'element-plus'
import {cancelService, technicianServiceAdd, technicianServiceSel} from "/@/api/backend/technician";
import {fullUrl} from "/@/utils/common";


const props = defineProps({
    technician_id: {
        type: Number,
        default: 0
    }
})

watch(() => props.technician_id, (val) => {
    if (val > 0) {
        getExistBaTable()
        getBaTable()
    }
})

const close = () => {
    selArr = [];
    dialogVisible.value = false
}
const ok = () => {
    if (selArr.length < 1) {
        ElMessage.error('请选择要关联的服务！')
    }

    if (props.technician_id < 1) {
        ElMessage.error('请先选择技师后在进行关联！');
    }

    technicianServiceAdd({technician_id: props.technician_id, service_ids: selArr}).then(res => {
        if (res.code !== 1) {
            ElMessage.error(res.msg)
            return
        }
        ElMessage.success('关联成功！')
        getExistBaTable()
        getBaTable()
        selArr = []
        dialogVisible.value = false
    })
}

let selArr = [];
const handleSelectionChange = (val: any) => {

    console.log(val.length)


    if (val.length < 1) {
        selArr = []
        return
    }
    for (let i = 0; i < val.length; i++) {
        selArr.push(toRaw(val[i]).service_id)
    }
    console.log("arr", selArr)
}

const {t} = useI18n()
const tableRef = ref()
const dialogVisible = ref(false)


const serviceData = ref();
const tableData = ref();
const getBaTable = () => {
    technicianServiceSel({technician_id: props.technician_id, type: 'notExist'}).then(res => {
        serviceData.value = res.data.list
    })
}
const getExistBaTable = () => {
    technicianServiceSel({technician_id: props.technician_id, type: 'exist'}).then(res => {
        tableData.value = res.data.list
    })
}

const confirmEvent = (service_id: number) => {
    cancelService({technician_id: props.technician_id, service_id: service_id}).then(res => {
        if (res.code !== 1) {
            ElMessage.error(res.msg)
            return
        }
        ElMessage.success('取消关联成功！')
        getExistBaTable()
        getBaTable()
    })
}

</script>
<style scoped lang="scss">
.el-table {
    margin-top: 20px;
}
</style>
